<template>
  <div class="form">
    <div class="title">{{$t('basic.enumerating_configurations')}} {{" - ["+(typeof(phaseData)== undefined?'':phaseData.enumGrpType )+ "]"}}
    </div>
    <el-form :model="formData" label-width="85px" ref="ruleForm" size="small" :hide-required-asterisk="true">
      <el-row :gutter="24" justify="end" type="flex">

        <el-col :xs="23" :sm="12" :md="12" :lg="6" :xl="6" style="text-align: right;">
          <el-form-item label-width="0" style="text-align: right;" class="btnGourd">
            <el-button type="primary" size="mini" @click="handleAdd()">{{ $t("common.add") }}</el-button>
            <el-button type="primary" size="mini" @click="handleEdit()">{{ $t("common.edit") }}</el-button>
            <el-button type="primary" size="mini" @click="handleDel()">{{ $t("common.remove") }}</el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :xs="24">
          <div class="tableAuto">
            <el-table :data="tableData" :height="height" style="width:100%" @row-click="rowClick" border stripe v-loading="tableLoading"
              :header-cell-style="{background:'#EAEBEC'}" ref="refTable" highlight-current-row>
              <el-table-column label="" width="50" align="center">
                <template slot-scope="scope">
                  <div>
                    <el-radio :label="scope.row.fid" v-model="radioId">&nbsp;</el-radio>
                  </div>
                </template>
              </el-table-column>
              <el-table-column type="index" :label="$t('common.number')" width="100" align="center"></el-table-column>
              <el-table-column prop="enumsDesc" show-overflow-tooltip :label="$t('basic.enum_names')" width="150"></el-table-column>
              <el-table-column prop="enumsValue" show-overflow-tooltip :label="$t('basic.enum')" width="150">

              </el-table-column>
              <!-- <el-table-column prop="wr" show-overflow-tooltip label="读写" width="100">
                <template slot-scope="scope">
                  {{getDataType(scope.row.wr)}}
                </template>
              </el-table-column> -->
              <el-table-column prop="flastModifyComment" show-overflow-tooltip :label="$t('common.describe')"></el-table-column>
              <el-table-column prop="flastModifyTime" show-overflow-tooltip :label="$t('basic.modification_time')"></el-table-column>
            </el-table>
          </div>
        </el-col>
        <el-col :xs="24">
          <div class="pagination-area">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100]"
              :page-size="pager.pageSize" :current-page="pager.pageNum" layout="total, sizes, prev, pager, next, jumper"
              :total="pager.total">
            </el-pagination>
          </div>
        </el-col>
        <!-- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="备注">
            <el-input rows="3" type="textarea" v-model="formData.flastModifyComment" placeholder="" clearable disabled></el-input>
          </el-form-item>
        </el-col> -->
      </el-row>
    </el-form>
    <!-- <div class="footerBtn">
      <el-button type="primary" size="small" :loading="loading" @click="handleConfirm('ruleForm')">{{ $t("common.preservation") }}</el-button>
    </div> -->

    <el-dialog :title="title == 1 ? $t('common.add') : $t('common.edit')" :visible.sync="isShowAdd" :close-on-click-modal="false"
      :before-close="handleCloseAdd" :width="screenWidth > 1000 ? '30%' : '30%'" v-dialogDrag>
      <el-form :model="ruleForm" label-width="85px" ref="formName" size="small" :rules="addRules" :hide-required-asterisk="true">
        <el-row :gutter="35">
          <el-col :xs="24">
            <el-form-item :label="$t('basic.enum_names')" prop="enumsDesc">
              <el-input type="text" v-model="ruleForm.enumsDesc" placeholder="" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item :label="$t('basic.enumeration_type')" prop="enumsGrpId" class="w-100">
              <!-- <el-select v-model="ruleForm.enumsGrpId" placeholder="" clearabl>
                <el-option v-for="(item,index) in dataTypeList" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select> -->

              <el-input type="text" v-model="ruleForm.enumsGrpId" placeholder="" clearable disabled></el-input>

            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item :label="$t('basic.enum')" prop="enumsValue">
              <el-input type="number" v-enterNumber v-model="ruleForm.enumsValue" placeholder="" clearable></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :xs="24">
            <el-form-item label="读写" prop="wr" class="w-100">
              <el-select v-model="ruleForm.wr" placeholder="" clearable>
                <el-option v-for="(item,index) in wrList" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :xs="24">
            <el-form-item :label="$t('common.describe')" prop="flastModifyComment">
              <el-input rows="3" type="textarea" v-model="ruleForm.flastModifyComment" placeholder="" clearable></el-input>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" :loading="loadingTab"
          @click="handleConfirmForm('formName')">{{ $t("common.preservation") }}</el-button>
        <el-button @click="handleCloseAdd()" size="small">{{ $t("common.cancel") }}</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { configure } from "@/api/configure"
export default {
  props: {
    screenWidth: Number,
    isShow: Boolean,
    phaseData: Object,
    parentFid: String
  },
  data () {
    let hihiFn = (rule, value, callback) => {
      if (this.ruleForm.hihiEnable && !value) {
        callback(new Error('请输入HiHi'));
      } else {
        callback();
      }
    }
    let hiFn = (rule, value, callback) => {
      if (this.ruleForm.hiEnable && !value) {
        callback(new Error('请输入Hi'));
      } else {
        if (this.ruleForm.hihiEnable && (parseFloat(value) >= parseFloat(this.ruleForm.hihi))) {
          callback(new Error('Hi不能大于等于HiHi'));
        } else {
          callback();
        }
      }
    }
    let loFn = (rule, value, callback) => {
      if (this.ruleForm.loEnable && !value) {
        callback(new Error('请输入Lo'));
      } else {
        if (this.ruleForm.hiEnable && (parseFloat(value) >= parseFloat(this.ruleForm.hi))) {
          callback(new Error('Lo不能大于等于Hi'));
        } else if (!this.ruleForm.hiEnable && this.ruleForm.hihiEnable && (parseFloat(value) >= parseFloat(this.ruleForm.hihi))) { //如果hi没填  hihi填了 则去和hihi比较
          callback(new Error('Lo不能大于等于HiHi'));
        } else {
          callback();
        }
      }
    }
    let loloFn = (rule, value, callback) => {
      if (this.ruleForm.loloEnable && !value) {
        callback(new Error('请输入LoLo'));
      } else {
        if (this.ruleForm.loEnable && (parseFloat(value) >= parseFloat(this.ruleForm.lo))) {
          callback(new Error('LoLo不能大于等于Lo'));
        } else if (!this.ruleForm.loEnable && this.ruleForm.hiEnable && (parseFloat(value) >= parseFloat(this.ruleForm.hi))) {
          callback(new Error('LoLo不能大于等于Hi'));
        } else if (!this.ruleForm.loEnable && !this.ruleForm.hiEnable && this.ruleForm.hihiEnable && (parseFloat(value) >= parseFloat(this.ruleForm.hihi))) {
          callback(new Error('LoLo不能大于等于HiHi'));
        } else {
          callback();
        }
      }
    }
    return {
      formData: {
        flastModifyComment: "", //备注
      },
      ruleForm: {
        enumsDesc: "", //参数名称
        enumsGrpId: "", //读写类型
        wr: 0,
        enumsValue: 0,
        hihiEnable: false,
        hiEnable: false,
        loloEnable: false,
        loEnable: false,
        flastModifyComment: "", //描述
      },
      dataTypeList: [{
        label: "Float",
        value: 0
      }, {
        label: "Int",
        value: 1
      }, {
        label: "String",
        value: 2
      }, {
        label: "Bool",
        value: 3
      }],
      title: 1,
      height: "calc(100vh - 275px)",
      tableData: [],
      tableLoading: false,
      loading: false,
      isShowAdd: false,
      loadingTab: false,
      uomIdList: [],
      radioId: "",
      addRules: {
        name: [{ required: true, message: '参数名称不能为空', trigger: 'blur' }],
        wr: [{ required: true, message: '读写类型不能为空', trigger: 'change' }],
        // uom:[{ required: true, message: '单位不能为空', trigger: 'change' }],
        type: [{ required: true, message: '数据类型不能为空', trigger: 'change' }],
        hihi: [{ validator: hihiFn, trigger: 'blur' }],
        hi: [{ validator: hiFn, trigger: 'blur' }],
        lo: [{ validator: loFn, trigger: 'blur' }],
        lolo: [{ validator: loloFn, trigger: 'blur' }],
      },
      wrList: [{
        label: "读写",
        value: 0
      }, {
        label: "只读",
        value: 1
      }, {
        label: "只写",
        value: 2
      }],
      pager: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
    }
  },
  watch: {
    parentFid (val) {
      this.formData.flastModifyComment = this.phaseData.description
      this.getPhaseTagDefineList()
    },
  },
  created () {
    this.ruleForm.enumsGrpId = this.phaseData?.enumGrpType
    this.getUomList()
    this.getPhaseTagDefineList()
  },
  methods: {
    getPhaseTagDefineList () {
      const param = {
        page: this.pager.pageNum,
        size: this.pager.pageSize,
        enumsGrpId: this.parentFid
      }
      this.tableLoading = true
      configure.getEnumsList(param).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.rows
          this.pager.total = res.data.total
        }
        this.tableLoading = false
      })
    },
    // 获取计量单位列表
    getUomList () {
      const param = {
        page: 1,
        size: 9999
      }
      configure.getUomList(param).then(res => {
        if (res.code == 200) {
          this.uomIdList = res.data.rows
        }
      }).catch(e => {

      })
    },
    handleConfirmForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const param = {
            ...this.ruleForm,
            enumsGrpId: this.parentFid
          }
          // param.enumsGrpId = this.phaseData.fId
          // param.hihiEnable = this.ruleForm.hihiEnable == true ? 1 : 0
          // param.hiEnable = this.ruleForm.hiEnable == true  ? 1 : 0
          // param.loEnable = this.ruleForm.loEnable == true  ? 1 : 0
          // param.loloEnable = this.ruleForm.loloEnable == true  ? 1 : 0
          this.loadingTab = true

          configure.enumsAdd(param, this.title).then(res => {
            if (res.code == 200) {
              this.$message({ duration: 1000, type: 'success', message: '保存成功!' });
              this.getPhaseTagDefineList()
              this.isShowAdd = false
            } else {
              this.$message.error(res.msg);
            }
            this.loadingTab = false
          })
        }
      })
    },
    handleConfirm () {
      let param = {
        fid: this.phaseData.fid,
        name: this.phaseData.name,
        type: this.phaseData.type,
        sn: this.phaseData.sn,
        description: this.formData.flastModifyComment,
      }
      this.loading = true
      configure.enumsAdd(param, '编辑').then(res => {
        this.loading = false
        if (res.code == 200) {
          this.$message({ duration: 1000, type: 'success', message: '保存成功!' });
          this.$emit('uptionList')
        } else {
          this.$message.error(res.msg);
        }
      }).catch(e => {
        this.loading = false
      })
    },
    rowClick (row) {
      this.radioId = row.fid;
      this.$refs.refTable.setCurrentRow(row);
    },
    handleAdd () {
      this.title = 1
      this.ruleForm = { enumsValue: 0, }

      this.ruleForm.enumsGrpId = this.phaseData.enumGrpType
      try {
        this.$refs['formName'].resetFields();
      } catch (e) { }
      this.isShowAdd = true
    },
    handleEdit () {
      if (this.radioId === '') {
        this.$message.error('请选择修改数据');
        return
      }
      const item = this.tableData.find(item => item.fid == this.radioId)
      if (item) {
        this.ruleForm = Object.assign({}, item)
        this.ruleForm.enumsGrpId = this.phaseData.enumGrpType
        // this.ruleForm.hihiEnable = item.hihiEnable == 1 ? true : false
        // this.ruleForm.hiEnable = item.hiEnable == 1  ? true : false
        // this.ruleForm.loEnable = item.loEnable == 1  ? true : false
        // this.ruleForm.loloEnable = item.loloEnable == 1  ? true : false
      }
      this.title = 2
      this.isShowAdd = true
    },
    async handleDel () {
      if (this.radioId === '') {
        this.$message.error('请选择要删除的数据');
        return
      }
      let that = this
      const item = this.tableData.find(item => item.fid == this.radioId)
      this.$customConfirm({
        content: "请确认是否删除枚举定义 " + item.enumsDesc,
        onok () {
          configure.removeEnumsGroup(item.fid).then(res => {
            if (res.code == 200) {
              that.getPhaseTagDefineList()
              that.radioId = ''
              that.$message({ duration: 1000, type: 'success', message: '删除成功!' });
            } else {
              this.$message.error(res.msg);
            }
          })
        }
      });
    },
    handleCloseAdd () {
      this.isShowAdd = false
    },
    handleSizeChange (val) {
      this.pager.pageSize = val
      this.getPhaseTagDefineList()
    },
    handleCurrentChange (val) {
      this.pager.pageNum = val;
      this.getPhaseTagDefineList()
    },
    getDataType (id) {
      // if (!id && id !== 0) return ''
      return this.wrList.find(item => item.value == id).label
    },
    getwrName (id) {
      if (!id && id !== 0) return ''
      return this.wrList.find(item => parseInt(item.value) == id).label
    }
  }
}
</script>

<style scoped>
.form >>> .el-row {
  display: flex;
  flex-wrap: wrap;
}
.title {
  line-height: 35px;
  background: #3b2e58;
  color: #fff;
  padding: 0 15px;
  font-size: 14px;
  margin-bottom: 10px;
}
.footerBtn {
  text-align: right;
}
.pagination-area {
  padding: 10px;
}
</style>